<!DOCTYPE html>
<html lang="en">

<head>
    <title>登陆界面</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 100%;
        width: 100%;
        background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
    }

    header {
        margin-top: 20px;
        background-color: #fff;
        text-indent: 1em;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        color: #c7e0f4;

    }

    .container {
        width: calc(100% - 120px);
        height: 100%;
        margin: 30px 40px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, .7);
    }

    .list {
        margin-top: 20px;
        width: 100%;
        /* padding: ; */

    }

    .list ul li {
        position: relative;
        list-style: none;
        margin: 20px 20px 0;
        /* padding: 0 10px; */
        width: calc(100 - 40px);
        height: 100px;
        text-indent: 2em;
        border-bottom: 1px dotted #000;
    }

    .list ul li:last-child {

        border-bottom: none;
    }

    .title {
        font-size: 24px;
        font-weight: 400;

    }

    .footer {
        position: absolute;
        bottom: 10px;
    }

    .author {
        float: left;

    }

    .createtime {
        float: right
    }
</style>

<body>

    <header>
        欢迎回来!
    </header>
    <div class="container">
        <div class="list">
            <ul></ul>
        </div>
    </div>
    <footer>

    </footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script>
    const header = document.querySelector('header')
    const ul = document.querySelector('ul')
    let blogList

    let params = window.location.href.toString().split('?')[1]
    if (params) {
        let realname = params.split('=')[1]
        header.innerText = '欢迎回来！' + realname
    }

    axios.get('/api/blog/list')
        .then(res => {
            blogList = res.data.data
            console.log(blogList);
            if (blogList) {
                blogList.forEach(element => {
                    const li = document.createElement('li')
                    li.innerHTML = `<div class= "title">${element.title}</div>
                                    <div class= "content">${element.content}</div>
                                    <div class= "footer"> 
                                        <div class= "author">作者：${element.author}</div> 
                                        <div class= "createtime">发表时间：${dealTimeStamp(element.createtime)}</div>
                                    </div>`

                    //跳转
                    li.onclick = function () {
                        let a = document.createElement('a')
                        a.href = `/detail.html?id=${element.id}`
                        // a.style.display = 'none'
                        document.body.appendChild(a)
                        a.click()
                        document.body.removeChild(a)
                    }
                    ul.appendChild(li)

                })
            }

        });

    //博客详情页跳转
    // const list = document.querySelector('.list')



    function dealTimeStamp(timestamp) {
        let date = new Date(parseInt(timestamp));
        let Year = date.getFullYear();
        let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
        let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
        let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
        let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
        let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        let GMT = Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
        return GMT
    }



</script>

</html>